﻿<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    html,body{
      height:100%;
    }
    #alert-box{
      width:60%;
      height:40%;
      color:#fff;
      transition:all ease 0.35s;
      position:absolute;
      left:0;
      right:0;
      top:0px;
      bottom:0px;
      margin:auto;
      background-color:rgba(255,0,0,.6);
      box-shadow:0 0 20px rgba(0,0,0,.5);
    }
    #alert-box .close-self{
      height:40px;
      width:40px;
      background-color:#ccc;
      text-align:center;
      line-height:40px;
      position:absolute;
      right:-40px;
      top:0;
      cursor:pointer;
    }
    #alert-box h2{
      border-bottom:2px solid rgba(255,255,255,.8);
      height:40px;
      line-height:40px;
      margin:0;
      text-align:center;
    }
    #alert-box p{
      padding:5px;
      margin:0;
      text-indent:1em;
    }
    .close{
      opacity:0;
    }
    .close-scale{
      transform:scale(0);
    }
    .close-dropDown{
      transform:translateY(-100px);
      opacity:0;
    }
    /*bug 出现滚动条或滚动条增加*/
    .close-dropUp{
      transform:translateY(20px);
      opacity:0;
    }
    .close-dropLeft{
        transform:translateX(-50px);
        opacity:0;
    }
  </style>
</head>
<body>
  <input id="btn" type="button" value="Open/Close" />
  <div id="alert-box" class="close-scale">
    <div id="close-self" class='close-self'>x</div>
    <h2>Alert Title</h2>
    <p>
      alert message alert message alert message alert message alert message alert message alert message alert message alert message alert message alert message alert message
    </p>
  </div>
  <script>
    var ab = document.getElementById('alert-box');
    document.getElementById('btn').onclick = function(){
      ab.className = ab.className == 'close-dropLeft' ? '' : 'close-dropLeft';
    }
    document.getElementById('close-self').onclick = function(){
      document.getElementById('btn').click();
    }
  </script>
</body>
</html>